*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background: url(../images/bg.jfif) no-repeat;
    background-size: cover;
}
/* -------------------banner begin */
.banner{
    width: 70%;
    height: 17.1875vw;
    background-color: rgb(41, 100, 182);
    position: relative;
    top: 6.25vw;
    left: 10%;
    overflow: hidden;
    box-shadow: 0.7813vw 0.7813vw 0.7813vw 0.7813vw rgb(25, 15, 47);
}
.banner div{
    display: inline-block;
    border-radius: 50%;
    border: solid 0.0781vw white;
}
.banner>div{
    position: absolute;
    top: -110%;
}
.banner>div>div>div>div{
    margin: 3.9063vw;
}
.banner>div>div>div{
    margin: 4.6875vw;
}
.banner>div>div{
    margin: 5.4688vw;
}
.banner>div{
    margin: 6.25vw;
}
.banner>div>div>div>div>div{
    width: 7.8125vw;
    height: 7.8125vw;
    margin: 3.125vw;
}
.banner img{
    border-radius: 50% !important;
    position: absolute;
    cursor: pointer;
}
.banner img:nth-of-type(1){
    top:9.375vw;
    left:3.6719vw;
}
.banner img:nth-of-type(2){
    top:1.5625vw;
    left:8.5938vw;
}
.banner img:nth-of-type(3){
    top:1.875vw;
    left:20.625vw;
}
.banner img:nth-of-type(4){
    top:7.3438vw;
    left:39.0625vw;
}
.banner img:nth-of-type(5){
    top:2.7344vw;
    left:45.5469vw;
}
/* -------------------banner end */

/* -------------------music begin */
.music{
    position: absolute;
    top: 35.1563vw;
    left: 0;
    width: 52.3438vw;
    height: 7.8125vw;
    background: black;
    box-shadow: 0.3906vw 0.3906vw 0.3906vw 0.0781vw rgb(6, 0, 0);
}
.music img{
    margin: 0.7813vw 0 0 0.7813vw;
    vertical-align: top;
}
.music>nav{
    display: inline-block;
    width: 50%;
    height: 7.8125vw;
    overflow: hidden;
}
.music h3{
    line-height: 7.8125vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    color: white;
    font-size: 3.9063vw;
    animation-name: musicName;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.music h3:hover{
    animation-play-state: paused;
}
.music span{
    margin: 0 0.9375vw 0 0.9375vw;
    position: relative;
    left: 1.5625vw;
    bottom: 2.8125vw;
    color: rgb(160, 158, 158);
    font-size: 2.3438vw;
    line-height: 7.8125vw;
}
.music span{
    
}
.music span:hover{
    color: white;
}
.music>div{
    display: inline-block;
    float: right;
    width: 1.5625vw;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    left: 0vw;
}
.music>div:hover{
    background: rgba(252, 251, 251, 0.4);
}
.music>div div{
    margin: 0 auto;
    width: 1.1719vw;
    height: 1.1719vw;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%) rotate(-45deg);
    border-top: solid rgb(125, 124, 124) 0.1563vw;
    border-left: solid rgb(125, 124, 124) 0.1563vw;
}
.music>div .outer{
    margin: 0 auto;
    width: 1.1719vw;
    height: 1.1719vw;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%) rotate(-45deg);
    border-top: solid rgb(125, 124, 124) 0.1563vw;
    border-left: solid rgb(125, 124, 124) 0.1563vw;
}
.music>div .inner{
    margin: 0 auto;
    width: 1.1719vw;
    height: 1.1719vw;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%) rotate(135deg);
    border-top: solid rgb(125, 124, 124) 0.1563vw;
    border-left: solid rgb(125, 124, 124) 0.1563vw;
}

/* -------------------music end */

@keyframes musicName {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}
@keyframes musicMoveOut {
    0%{
        transform: translateX(-96%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes musicMoveIn {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-96%);
    }
}
@keyframes imagesRotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}